<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="${pageContext.request.contextPath }/webjars/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(function(){
		$("#btn-search").click(function(){
			$("#f1").attr("action","${pageContext.request.contextPath }/emp/list")
			$("#f1").submit();
		});
	});
	
	function changePage(pageNo) {
		f1.pageNo.value=pageNo;
		f1.action="${pageContext.request.contextPath }/emp/list"
		f1.submit();
		
	}
</script>
<title>Insert title here</title>
<style type="text/css">
	h1{
		text-align: center;
	}
	table {
		margin: 10px auto;
		width: 600px;
		border-collapse: collapse;/*边框折叠*/
		text-align: center;
	}
	td,th{
		border: 1px solid blue;
		height: 40px
	}
	tr:nth-child(odd) {/*隔行变色*/
		background: red;
}
	tr:hover {/*鼠标悬停色*/
		background: lightgreen;
}
	#p1{
		margin:0 auto;
		width: 600px
	}
	#div-search{
		text-align:center
		
	}
</style>
</head>
<body>
	<h1>员工列表</h1>
	<div id="div-search">
		<form id="f1" method="get">
			<input type="text" name="name" value="${param.name }">
			<input type="hidden" name="pageNo" value="1">
			<input type="hidden" name="pageSize" value="3">
			<button type="button" id="btn-search">搜索</button>
		</form>
		
	</div>
	<table>
		<tr>
			<th>员工编号</th>
			<th>姓名</th>
			<th>工资</th>
			<th>生日</th>
			<th>部门</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${empList }" var="emp">
			<tr>
				<td>${emp.empId }</td>
				<td>${emp.name }</td>
				<td>${emp.sal}</td>
				<td>
					<fmt:formatDate pattern="yyyy-MM-dd" value="${emp.birthday }"/>
				</td>
				<td>${emp.deptId}</td>	
				<td>修改|删除</td>
			</tr>
		</c:forEach>
	</table>
	<p id="p1">
		<c:if test="${param.pageNo ==1 }">
			<a href="###" onclick="javascript:changePage(${param.pageNo+1})" >下一页</a>
		 	<a href="###" onClick="javascript:changePage(${pageCount})">末页</a>
		</c:if>
		<c:if test="${param.pageNo !=1 & param.pageNo!=pageCount}">
			<a href="###" onclick="javascript:changePage(1)" >首页</a>
			<a href="###" onclick="javascript:changePage(${param.pageNo-1})"  >上一页</a>
			<a href="###" onclick="javascript:changePage(${param.pageNo+1})" >下一页</a>
		 	<a href="###" onClick="javascript:changePage(${pageCount})">末页</a>
		</c:if>
		<c:if test="${param.pageNo==pageCount}">
			<a href="###" onclick="javascript:changePage(1)" >首页</a>
			<a href="###" onclick="javascript:changePage(${param.pageNo-1})">上一页</a>
		</c:if>
		
	</p>
</body>
</html>